<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>使用vue编辑页面</title>
</head>
<body>
<div id="app">
    <a  v-bind:href="url">百度</a>
  <div align="center">
      姓名：<input type="text" v-model="demo_user.name" >
      年龄：<input type="text" v-model="demo_user.age">
      性别：<input type="text" v-model="demo_user.sex">
      <button @click="select(demo_user)">查询</button>
  </div>
<table border="1px" width="70%" align="center" id="tab1"  style="background-color: #7fffd4">
    <tr align="center" height="60px">
        <th colspan="5">用户列表</th></tr>
    <tr align="center" height="60px"  >
        <th>编号</th>
        <th>名称</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr align="center" v-for="demo_user in userList">
        <td v-text="demo_user.id"></td>
        <td v-text="demo_user.name"></td>
        <td v-text="demo_user.age"></td>
        <td v-text="demo_user.sex"></td>
        <td>
            <button  @click="deleteById(demo_user.id)">删除</button>
            <button  @click="add(demo_user.id)">新增</button>
            <button  @click="add(demo_user.id)">修改</button>
        </td>
    </tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>
    axios.defaults.baseURL='http://localhost:8080'
    const app=new Vue({
        el:"#app",
        data:{
            userList:[],
            demo_user:{
                name:'',
                age:'',
                sex:''
            },
            url:'/updata'
        },
        created() {
            this.findUser()
        },
        methods: {
            async findUser() {
                let {data: list} =await axios.get("/findall/userList")
                this.userList=list
            },
            async deleteById(id){
                    let {data: list} =await axios.delete("/findall/delete?id="+id)
                    this.findUser();

            },
            async select(demo_user){
                let {data:list}=await axios.post("/findall/selectLike",demo_user)
                this.userList=list
            },

        }
    })

</script>
</body>
</html>